1import { ImageResponse } from 'next/og';2import { publicProfile } from '@/lib/account/queries';3import { summarizePortfolio } from '@/lib/account/portfolio';4import { fmtMoney } from '@/lib/format';56export const runtime = 'nodejs';7export const alt = 'RareIndex collector profile';8export const size = { width: 1200, height: 630 };9export const contentType = 'image/png';1011export default async function Image({ params }: { params: Promise<{ handle: string }> }) {12 const { handle } = await params;13 const p = await publicProfile(handle);14 const name = p?.user.name ?? `@${handle}`;15 const total = p ? summarizePortfolio(p.items) : null;16 const top = total?.allocationByFamily.slice(0, 3).map((b) => b.label).join(' · ') ?? '';17 return new ImageResponse(18 (19 <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: 64, background: '#fafaf9', color: '#0b0b0c', fontFamily: 'sans-serif' }}>20 <div style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 28, fontWeight: 600 }}>21 <div style={{ width: 40, height: 40, background: '#0b0b0c', color: '#fff', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 22 }}>R</div>22 RareIndex <span style={{ color: '#55555b', fontWeight: 400 }}>· collector profile</span>23 </div>24 <div style={{ display: 'flex', flexDirection: 'column' }}>25 <div style={{ fontSize: 72, fontWeight: 700, letterSpacing: -2 }}>{name}</div>26 <div style={{ fontSize: 30, color: '#55555b', marginTop: 8 }}>@{handle}{top ? ` · ${top}` : ''}</div>27 </div>28 <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', borderTop: '2px solid #e4e4e2', paddingTop: 24 }}>29 <div style={{ display: 'flex', flexDirection: 'column' }}>30 <div style={{ fontSize: 20, color: '#8a8a91', textTransform: 'uppercase', letterSpacing: 2 }}>Public collection value</div>31 <div style={{ fontSize: 56, fontWeight: 700 }}>{total?.valuedCount ? fmtMoney(total.valueUsd) : '—'}</div>32 </div>33 <div style={{ fontSize: 24, color: '#55555b' }}>{total ? `${total.itemCount} items · ${p?.collections.length ?? 0} collections` : ''}</div>34 </div>35 </div>36 ),37 { ...size },38 );39}40